<template>
    <div id="uTeacher">
      <!--<div v-if="showUpload" class="showUpload">
            <div class="showUploadCt">
            <button @click="upload">上传</button>
            </div>
      </div>-->
      <div style="position:relative">
        <el-autocomplete
                  v-model="state4"
                  :fetch-suggestions="querySearchAsync"
                  placeholder="搜索框"
                  @select="handleSelect">
                  <i
                    class="el-icon-search el-input__icon"
                    slot="suffix"
                  >
                  </i>
      </el-autocomplete>
      <div  ref="addC"  style="opacity:1.0;padding:0;height:25px;border-bottom:1px solid #eee;transition:all 0.6s ease;width:50px;position:absolute;bottom:20%;left:230px;z-index:100;overflow:hidden">
        <div style="cursor:pointer;font-weight:bold;cursor:point;opacity:1.0;z-index:100;background:#eee;right:15px;position:absolute;" ref="addTittle" @click="addC">
            {{addTittle}}
        </div>
        <img style="height:18px;width:7px;position:absolute;top:2px;right:3px;z-index:1000" :src="addSrc">
        <div class="addC" ref="op" style="opacity:1.0;transition:all 0.2;display:none">
          <select style="width:80px" v-model="selected" change="changeType()">
                <option disabled value="none">选择类型</option>
                <option value="daoru">导入表格</option>
                <option value="工号">添加老师</option>
          </select>
          <transition name="showUp">
            <div v-if="selected==='工号'" ref="num"  style="position:absolute;bottom:0px;left:100px;width:700px" key="num">
              <span>姓名</span><input style="margin-right:0.5vw;padding:0.4vw;font-size:1.0vw;width:50px;background:white;border:none;outline:none;box-shadow:  inset -1px -1px 5px  rgba(0,0,0,0.2);" v-model="classNum" class="numInput" placeholder="">
              <span>工号</span><input style="margin-right:0.5vw;padding:0.4vw;font-size:1.0vw;width:90px;background:white;border:none;outline:none;box-shadow:  inset -1px -1px 5px  rgba(0,0,0,0.2);"  class="numInput" placeholder="">
              <span>院系</span><input style="margin-right:0.5vw;padding:0.4vw;font-size:1.0vw;width:50px;background:white;border:none;outline:none;box-shadow:  inset -1px -1px 5px  rgba(0,0,0,0.2);"  class="numInput" placeholder="">
              <span>电话</span><input style="padding:0.4vw;font-size:1.0vw;width:100px;background:white;border:none;outline:none;box-shadow:  inset -1px -1px 5px  rgba(0,0,0,0.2);"  class="numInput" placeholder="  ">
              <span style="margin:0;padding:0.7% 0.4% 0.7% 2%;font-weight:bold;cursor:pointer" type="primary">确定</span>
            </div>
            <div v-else ="selected==='daoru'" style="position:absolute;bottom:0;left:100px;" key="upload">
              <input @change="getFile($event,'2')"   type="file" style="opacity:0.0;width:65px;position:relative;bottom:5px;left:0;z-index:100">
              <div style="position:absolute;bottom:5px;left:0px;z-index:99;font-weight:bold">点击上传</div>
              <div style="position:absolute;bottom:5px;left:80px;width:400px;color:gray">
                <span>文件:</span>
                <span>{{upath.name}}</span>
                <span @click="upload" style="right:0px;position:absolute;margin:0;padding:0.7% 0.4% 0.7% 2%;font-weight:bold;cursor:pointer" type="primary">确定</span>
              </div>
            </div>
          </transition>
        </div>
      </div>
      </div>
      <el-dialog
          title="编辑用户信息"
          :visible.sync="editDialog0"
          width="60%"
          :before-close="handleClose">
          <div style="padding-left:1.5vw">
                <div style="color:#303133;float:left;border-bottom:1px solid #ccc;;width:16%;margin-right:01vw;padding-left:0.8vw">
                姓名
                <input style=" padding-left:0.2vw;color:gray;font-size:1.3vw;width:60%;background:white;border:none;outline:none;"  placeholder="">
              </div>
              <div style="color:#303133;padding-left:0.8vw;margin-right:01vw;float:left;border-bottom:1px solid #ccc;width:20%">
                工号
                <input style="padding-left:0.2vw;color:gray;font-size:1.3vw;width:65%;background:white;border:none;outline:none;"  placeholder="">
              </div>
              <div style="color:#303133;padding-left:0.8vw;margin-right:01vw;float:left;border-bottom:1px solid #ccc;width:28%">
                院系
                <input style="padding-left:0.2vw;color:gray;font-size:1.3vw;width:70%;background:white;border:none;outline:none;"  placeholder="">
              </div>
              <div style="color:#303133;padding-left:0.8vw;float:left;border-bottom:1px solid #ccc;width:22%">
                电话
                <input style="padding-left:0.2vw;color:gray;font-size:1.3vw;width:65%;background:white;border:none;outline:none;"  placeholder="">
              </div>
          </div>
          <!--<input style=" color:gray;text-align:center;padding:0.4vw 0.4vw 0.1vw 0.4vw;font-size:1.3vw;width:12%;background:white;border:none;outline:none;border-bottom:1px solid #ccc"  placeholder="姓名">
          <input style=" color:gray;text-align:center;padding:0.4vw 0.4vw 0.1vw 0.4vw;font-size:1.3vw;width:18%;background:white;border:none;outline:none;border-bottom:1px solid #ccc"  placeholder="姓名">
          <input style=" color:gray;text-align:center;padding:0.4vw 0.4vw 0.1vw 0.4vw;font-size:1.3vw;width:25%;background:white;border:none;outline:none;border-bottom:1px solid #ccc"  placeholder="姓名">
          <input style=" color:gray;text-align:center;padding:0.4vw 0.4vw 0.1vw 0.4vw;font-size:1.3vw;width:20%;background:white;border:none;outline:none;border-bottom:1px solid #ccc"  placeholder="姓名">-->
          <span slot="footer" class="dialog-footer">
          </span>
        </el-dialog>
        <el-table
          border="true"
          align="left"
          :data="teacherData"
          style="width: 98%;height:30vw"
          :default-sort = "{prop: 'date', order: 'descending'}"
        >
          <!--<el-table-column
            type="selection"
            prop="_class"
            label="班级"
            sortable
            >-->
          </el-table-column>
          <el-table-column
            prop="userName"
            label="姓名"
           >
          </el-table-column>
          <el-table-column
            prop="userID"
            label="工号"
            :formatter="formatter">
          </el-table-column>
          <el-table-column
            prop="major"
            label="院系"
          >
          </el-table-column>
          <el-table-column
          prop="contact"
          label="电话"
         >
          </el-table-column>
          <el-table-column
          label="操作"
          >
          <template slot-scope="scope" >
          <el-button type="text" size="small" @click="editDialog = true">编辑</el-button>
          <el-button
          fixed="right"
          @click.native.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small">
          移除
          </el-button>
          </template>
          </el-table-column>
        </el-table>

        <el-dialog title="老师信息" :visible.sync="editDialog" style="margin-top:100px;" width="550px">
          <div style="text-align:center;height:50px;padding-bottom:15px;height:100%">
            <span>OJBK-</span>
            <span>新媒体实务-</span>
            <span>游戏系-</span>
            <span>黄宋杰</span>
          </div>
          <div style="text-align:center;height:50px;">
              <input style="margin-right:10px;width:80px;border:none;background:white;outline:none;padding:5px;border-bottom:1px solid #ccc" placeholder="姓名">
              <input style="margin-right:10px;width:80px;border:none;background:white;outline:none;padding:5px;border-bottom:1px solid #ccc" placeholder="工号">
              <input style="margin-right:10px;width:80px;border:none;background:white;outline:none;padding:5px;border-bottom:1px solid #ccc" placeholder="所属院系">
              <input style="margin-right:10px;width:80px;border:none;background:white;outline:none;padding:5px;border-bottom:1px solid #ccc" placeholder="电话">
              <span style="cursor:pointer;padding:6px;font-size:16px;font-weight:bold" type="primary" @click="goEdit">确 定</span>
              <!--<span  @click="editDialog = false" style="padding:0px;font-size:16px;">取 消</span>-->
          </div>
        </el-dialog>
    </div>

</template>
<style >
  th{
    color:#303133;
  }
  .el-table thead{
    color:#303133;
  }
   .el-input{
    width: 100%;
    border:none;
  }
  .el-table .el-input__inner{
    background: rgba(255, 255, 255, 0);
    border-color:rgba(255, 255, 255, 0);
  }
   .el-table .cell{
    text-align: center;
  }
  .showUp-enter-active {
  transition: all .3s ease;
  }
  .showUp-leave-active {
    transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .showUp-enter, .showUp-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateY(20px);
    opacity: 0;
  }
  #uTeacher{
    position: relative;
    }
    .el-table thead{
      color: white
    }
  #uTeacher.el-dialog__body{
      padding: 0 0 0 0;
    }
    .el-table__body{
      overflow-y:scroll;
    }

</style>
<script>
  import axios from 'axios'
    export default{
        data(){
            return{
              upath: {},
              userRoot: '',
              addTittle:'添加',
              addSrc:'/src/assets/closeL.png',
              selected:"工号",
              showUpload:"true",
              editDialog:false,
                teacherData:[/*{
                  _class: '游戏系',
                  name: '高伟廷',
                  number: '1440624xxx',
                  tel:'18202002066'
                }*/
                ],
            }
        },

      mounted:function(){
            this.teacherData=JSON.parse(this.$route.query.t_users);
        },
      methods: {

          upload: function () {
           // console.log(this.upath);
              var zipFormData = new FormData();
              zipFormData.append('filename', this.upath);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
              zipFormData.append('itRoot',this.userRoot);
              let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
              var _this = this;
              axios.post('/users/Excel_register',zipFormData,config).then(function (res) {
                 alert(res.data.msg);
                console.log(res.data);
                console.log(res.bodyText);     
              }).catch(function (err) {
                  console.log(err);
              });
          },
     
         getFile: function (even,theRoot) {
            this.upath = event.target.files[0];
            this.userRoot=theRoot;
            console.log(this.userRoot);
            console.log(this.upath.name);
          },
        addC(){
            switch (this.$refs.addC.style.width){
                    case "50px":
                    console.log(this.$refs.addC.style.opacity)
                    this.$refs.op.style.display="block";
                    this.$refs.op.style.opacity="1.0";
                    this.$refs.addC.style.width="680px";
                    this.$refs.addC.style.borderBottom="1px solid gray";
                    this.$refs.addTittle.style.opacity="0.0"
                    this.$refs.addTittle.style.right="0px"
                    this.addTittle="..."
                    this.addSrc="/src/assets/closeR.png"
                   /* this.$refs.addC.style.opacity="1.0";*/
                    console.log(this.$refs.addC.style.opacity)
                    break;
                    case "680px":
                    this.$refs.op.style.opacity="0.0";
                    this.$refs.addC.style.width="50px";
                    this.$refs.addTittle.style.opacity="1.0"
                    this.$refs.addTittle.style.right="15px"
                    this.addTittle="添加"
                    this.addSrc="/src/assets/closeL.png"
                    this.$refs.addC.style.borderBottom="1px solid #eee";
                }
          },
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
        goEdit(index){
          /*this.$router.push('/Edit');*/
         console.log(index)
          this.editDialog=false;
        },

        deleteRow(index, rows) {
          rows.splice(index, 1);
        },
        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            this.$refs.multipleTable.clearSelection();
          }
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        }
      }
    }

</script>

    <!---->

